<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../less/index.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>

<body>
<!-- 头部 -->
<header class="suspension">
    <div class="my-navbar">
        <a href="#" class="logo">
            <i class="iconfont Navbar_logo"></i>
        </a>
        <div class="right">
            <a href="#" class="search">
                <i class="iconfont ic_search_tab"></i>
            </a>
            <a href="#" class="face">
                <img src="../img/login.png" alt="">
            </a>
            <div class="app-btn">
                <img src="../img/download.png" alt="">
            </div>
        </div>
    </div>
    <div class="channel-menu">
        <div class="tabs">
            <div class="tabs-list">
                <a href="#">首页</a>
                <a href="#">动画</a>
                <a href="#">番剧</a>
                <a href="#">国创</a>
                <a href="#">音乐</a>
                <a href="#">鬼畜</a>
                <a href="#">歌剧</a>
                <div class="line"></div>
            </div>
        </div>
        <div class="after">
            <i class="iconfont general_pulldown_s"></i>
        </div>
    </div>
</header>
<!-- 主体 -->
<div class="m-home">
    <div class="video-list">
        <a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a>
        <a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a><a href="#" class="video-item">
            <div class="card">
                <img src="../img/dog.jpg@480w_270h_1c" alt="">
                <div class="count">
                    <span>
                        <i class="iconfont icon_shipin_bofangshu"></i>
                        播放量
                    </span>
                    <span>
                        <i class="iconfont icon_shipin_danmushu"></i>
                        评论数
                    </span>
                </div>
            </div>
            <p class="title ellipsis-2">阿斯顿法师法法师懂法守法司法送达沙发沙发沙发撒大萨达发阿斯顿发生发大水发的</p>
        </a>
    </div>
</div>
<!-- 底部 -->
<footer class="app">
    <div class="btn-app">
        <i class="iconfont Navbar_logo"></i>
        打开APP，看你感兴趣的视频
    </div>
</footer>
</body>

</html>